<template>
  <div class="canvas-container">
    <canvas ref="canvas"></canvas>
    <div class="tab" v-if='flag'>
      <div class="tab_item" @click="outside">域内拓扑</div>
      <div class="tab_item" @click="within">域外拓扑</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getASApi } from '@/api/cesium/network/index'

const canvas = ref(null)
const screenwidth = ref()
const screenHeight = ref()
const linesWithIndex = ref([]) // 存储带有索引的线条数据
const flag=ref(false)

// 域内
const outside=()=>{
  flag.value=false
}

//域外
const within=()=>{
  flag.value=false
}

// 清理画布的函数
const clearCanvas = () => {
  const ctx = canvas.value.getContext('2d')
  const { width, height } = canvas.value
  ctx.clearRect(0, 0, width, height)
}

// 绘制图形的函数
const drawCircles = () => {
  const ctx = canvas.value.getContext('2d')
  const { width, height } = canvas.value

  // 定义圆心和半径
  const centerX = width / 2
  const centerY = height / 2
  const radius1 = Math.min(width, height) / 2 // 最小圆半径
  const radius2 = (radius1 / 2) * 1 // 次小圆半径
  const radius3 = (radius1 / 2) * 2 // 次大圆半径

  // 绘制次小的圆形
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius2, 0, 2 * Math.PI)
  ctx.strokeStyle = '#39A5F4'
  ctx.lineWidth = 3
  ctx.stroke()

  // 绘制次大的圆形
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius3, 0, 2 * Math.PI)
  ctx.strokeStyle = '#D4EFEE'
  ctx.lineWidth = 3
  ctx.stroke()
}

// 绘制直线的方法，传入一个包含多个线段的数组
const drawLines = (lines, color = 'black', highlightIndex = -1) => {
  const ctx = canvas.value.getContext('2d')
  ctx.strokeStyle = color
  lines.forEach((line, index) => {
    ctx.lineWidth = index === highlightIndex ? 3 : 0.1 // 如果是指定的索引，则线条变粗
    ctx.beginPath()
    ctx.moveTo(line.startX, line.startY)
    ctx.lineTo(line.endX, line.endY)
    ctx.stroke()
  })
}

// 主绘图函数
const drawCanvas = (lines, highlightIndex = -1) => {
  clearCanvas() // 先清理画布
  drawCircles() // 然后绘制图形
  if (lines && lines.length > 0) {
    drawLines(lines, '#A5F2FE', highlightIndex) // 你可以选择线段的颜色
  }
}

// 创建函数
const resizeCanvas = () => {
  const container = canvas.value.parentElement
  canvas.value.width = container.clientWidth
  canvas.value.height = container.clientHeight
  screenwidth.value = container.clientWidth
  screenHeight.value = container.clientHeight
}

const getdata = (value) => {
  getASApi({
    screenWidth: screenwidth.value,
    screenHeight: screenHeight.value,
    country: value
  }).then((res) => {
    linesWithIndex.value = res.data.rows.map((line, index) => ({ ...line, index }))
    drawCanvas(linesWithIndex.value)
  })
}

let hoveredLineIndex = -1 // 当前鼠标经过的线条索引

const handleMouseMove = (event) => {
  const ctx = canvas.value.getContext('2d')
  const rect = canvas.value.getBoundingClientRect()
  const mouseX = event.clientX - rect.left
  const mouseY = event.clientY - rect.top

  // 计算鼠标到圆心的距离
  const centerX = canvas.value.width / 2
  const centerY = canvas.value.height / 2
  const distanceToCenter = Math.sqrt((mouseX - centerX) ** 2 + (mouseY - centerY) ** 2)
  const radius1 = Math.min(canvas.value.width, canvas.value.height) / 2

  // 判断鼠标是否在圆内
  if (distanceToCenter > radius1) {
    // 如果鼠标在圆外，重置 hoveredLineIndex 并重绘画布
    if (hoveredLineIndex !== -1) {
      hoveredLineIndex = -1
      drawCanvas(linesWithIndex.value)
    }
    return
  }

  let newHoveredLineIndex = -1

  // 检查鼠标是否在任何线条上
  linesWithIndex.value.forEach((line, index) => {
    const { startX, startY, endX, endY } = line
    const dx = endX - startX
    const dy = endY - startY
    const length = Math.sqrt(dx * dx + dy * dy)
    const dot = ((mouseX - startX) * dx + (mouseY - startY) * dy) / length
    const closestX = startX + (dot / length) * dx
    const closestY = startY + (dot / length) * dy
    const distX = closestX - mouseX
    const distY = closestY - mouseY
    const distance = Math.sqrt(distX * distX + distY * distY)

    if (distance < 5) {
      // 设置一个阈值以确定鼠标是否在线上
      newHoveredLineIndex = index
    }
  })

  if (newHoveredLineIndex !== hoveredLineIndex) {
    hoveredLineIndex = newHoveredLineIndex
    drawCanvas(linesWithIndex.value, hoveredLineIndex)
  }
}

const handleContextMenu = (event) => {
  event.preventDefault() // 阻止默认的右键菜单

  const rect = canvas.value.getBoundingClientRect()
  const mouseX = event.clientX - rect.left
  const mouseY = event.clientY - rect.top

  let clickedLineIndex = -1

  // 检查鼠标是否在任何线条上
  linesWithIndex.value.forEach((line, index) => {
    const { startX, startY, endX, endY } = line
    const dx = endX - startX
    const dy = endY - startY
    const length = Math.sqrt(dx * dx + dy * dy)
    const dot = ((mouseX - startX) * dx + (mouseY - startY) * dy) / length
    const closestX = startX + (dot / length) * dx
    const closestY = startY + (dot / length) * dy
    const distX = closestX - mouseX
    const distY = closestY - mouseY
    const distance = Math.sqrt(distX * distX + distY * distY)

    if (distance < 5) {
      // 设置一个阈值以确定鼠标是否在线上
      clickedLineIndex = index
    }
  })

  if (clickedLineIndex !== -1) {
    // 在这里处理右键点击事件
    console.log(`右键点击了线 #${clickedLineIndex}`)
    console.log(linesWithIndex.value[clickedLineIndex])
    // 你可以在这里添加你想要的功能，比如显示详细信息或执行其他操作
    flag.value=true
  }
}

onMounted(() => {
  resizeCanvas()
  getdata('all')
  canvas.value.addEventListener('mousemove', handleMouseMove)
  canvas.value.addEventListener('contextmenu', handleContextMenu)
})

onUnmounted(() => {
  canvas.value.removeEventListener('mousemove', handleMouseMove)
  canvas.value.removeEventListener('contextmenu', handleContextMenu)
})

defineExpose({ getdata })
</script>

<style scoped lang="scss">
.canvas-container {
  width: 100vw;
  height: calc(100vh - 3rem);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .tab {
    width: 8rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: #fff;
    border-radius: 1px;
    margin-right: 1rem;
    margin-top: 1rem;

    .tab_item {
      line-height: 2.5rem;
      text-align: center;
      border-bottom:.0625rem solid black ;
    }
  }
}

canvas {
  max-width: 100%;
  max-height: 100%;
}
</style>
